import React, { Component } from "react"
import { StyleSheet, Text, View, Alert, Button } from 'react-native'

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import SayHello from './src/compoents/SayHello'
import HookPage from './src/pages/HookPage'


class MyApp extends Component {

  static navigationOptions = {
    header: null // 隐藏标题栏
  }

  gotoHookPage() {
    console.log('gotoHookPage')
    this.props.navigation.navigate('HookPage')
  }

  render() {
    return (
      <View style={layout.pad}>
        <Text style={layout.red}>hello my app.</Text>

        <SayHello style={[layout.pad, layout.red]} name="huangranran" />

        <View style={layout.heiseBox}>
          <Text style={layout.baise}>这是一个view</Text>
        </View>

        <View style={layout.linkBox}>
          <Button onPress={() => this.gotoHookPage()} title="前往hook页面" />
        </View>
      </View>
    )
  }
}

// 导航
const appNavigator = createStackNavigator({
  Home: MyApp,
  HookPage: HookPage
}, {
  initialRouteName: 'Home',
})

// 样式
const layout = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
    textAlign: 'center',
  },
  baise: {
    color: '#fff',
  },
  pad: {
    padding: 50,
    paddingLeft: 0,
    paddingRight: 0
  },
  heiseBox: {
    flex: 1,
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
    padding: 20,
    color: '#ffffff'
  },
  linkBox: {
    marginTop: 20,
    marginBottom: 20,
    display: 'flex',
    flexDirection: 'column',
    flexWrap: 'nowrap'
  }
})

export default createAppContainer(appNavigator)